<!-- ALL By 黎乐仁 -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
		<script src="https://unpkg.com/vue-router@4.5.0/dist/vue-router.global.js"></script>
		<link rel="stylesheet" href="css/main.css" />
	<body>
		<div id="app">
			<div id="banner">
				<h1>学校管理系统</h1>
				<a>个人信息</a>
				<a @click="logout" id="logout">登出</a>
			</div>
			<div id="left">
				<router-link to="/student">学生管理页面</router-link>
				<router-link to="/study">课程管理页面</router-link>
			</div>
			<div id="main">			
				<!-- 路由出口 当前的路由会显示在这个标签中 -->
				<router-view></router-view>
			</div>
		</div>
		<script type="module">		
			// 1.导入组件
			import student from './js/student.js'
			import study from './js/study.js'
			
			// 2.定义路由配置信息
			// path 指定访问路径
			// component 对应组件
			const routes = [
				{path: "/student",component: student},
				{path: "/study",component: study}
			]
			
			// 3.创建路由对象
			const router = VueRouter.createRouter(
				{
					// 指定一个路径的访问模式
					history: VueRouter.createWebHashHistory(),
					routes,
				}
			)
			
			var app = Vue.createApp({
				data(){
					return {
						message:"Hello World!",
					}
				},
				methods:{
					logout(){
						window.location.href = "login.html"
					}
				}
			})
			
			// 4.让应用支持路由
			app.use(router)
			var vm = app.mount("#app")
		</script>
	</body>
</html>
<!-- ALL By 黎乐仁 -->
